@import '../variables/default.scss';
@import '../mixins/index.scss';

.at-address-selector {
  & > .at-list__item {
    .at-list__item-content {
      overflow: visible;

      .item-content__info-note {
        width: calc(100% + #{$at-list-extra-width});
        font-size: inherit;
        margin-top: 10px * $hd;
      }
    }
  }

  .at-float-layout {
    .layout-header {
      background-color: #fff;
      text-align: center;
      border-bottom: $border-width-md solid $color-grey-4;
      padding: $spacing-v-md + 2px * $hd;

      &__title {
        padding-right: 0;
        font-size: $font-size-xl;
        font-weight: bold;
      }
    }

    &__container {
      border-radius: 8px * $hd 8px * $hd 0 0;
      overflow: hidden;
      max-height: initial;

      .layout-body {
        max-height: initial;
        padding: 0;

        &__content {
          max-height: initial;
          height: $at-address-selector-height;
          display: flex;
          flex-direction: column;
        }
      }
    }
  }

  .at-timeline {
    padding: $spacing-h-xl;
    max-height: 170px * $hd;
    overflow-y: auto;

    &-item {
      padding-bottom: $spacing-v-md * $hd;

      &.at-timeline-item-selected .at-timeline-item__content {
        color: $color-grey-2;
      }

      &:last-child {
        padding-bottom: 0;
      }

      &--disabled {
        opacity: $opacity-disabled;
      }

      &__dot,
      &__icon {
        width: $at-address-selector-dot-size;
        height: $at-address-selector-dot-size;
        top: ($at-address-selector-timeline-lineheight - $at-address-selector-dot-size)/2;
        background: $color-brand;

        &::after {
          width: $at-address-selector-dot-size;
          height: $at-address-selector-dot-size;
          border-color: $color-brand;
        }
      }

      &__content {
        color: $color-brand;
        margin-left: 27px * $hd;
        line-height: $at-address-selector-timeline-lineheight;
        min-height: $at-address-selector-timeline-lineheight;
      }

      &__icon {
        background: $color-grey-3;

        &::after {
          border-color: $color-grey-3;
        }
      }

      &__tail {
        top: $at-address-selector-dot-size;
        bottom: -$at-address-selector-dot-size;
        left: $at-address-selector-dot-size / 2 - 2px;
        border-left-color: $color-brand;
      }
    }
  }

  &-indexes-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    overflow: hidden;

    .at-indexes {
      flex: 1;

      .at-list__item {
        font-size: $font-size-slg;
        padding: $spacing-h-xl;
      }

      .at-indexes__menu {
        display: none;
      }

      &__list-title {
        line-height: 40px * $hd;
        padding: 0 $spacing-h-xl;
      }

      .item-extra__info {
        padding-right: 0;
      }
    }
  }

  &-empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
  }
}
